<template>
	<!-- 游记瀑布流列表 -->
	<view class="listImg">
		<!-- <navigator class="listBlcok"  v-for="(item, index) in fall" :key="index" :url="`/pages/common/${item.src}`" :id="item.id">
			<image :src="item.spimg" :mode="item.size" class="spimg"></image>
			<view class="listTitle">{{item.listTitle}}</view>
			<view class="listFooter">
				 <image :src="item.listPortrait" :mode="item.listmode">
				 <view class="listState">
					<view class="iconfont iconSize" :class="item.see"><text>{{item.listSee}}</text></view>
					<view class="iconfont iconSize" :class="item.like"><text>{{item.listLike}}</text></view>
				 </view>
			</view>
		</navigator> -->
		
		<!-- 左侧列表 -->
		<view class="listLeft" >
			<navigator class="listBlcok" v-for="(item, index) in fallLeft" :key="index" :url="`/pages/common/${item.src}`">
				<image :src="item.spimg" :mode="item.size" class="spimg"></image>
				<view class="listTitle">{{item.listTitle}}</view>
				<view class="listFooter">
					 <image :src="item.listPortrait" :mode="item.listmode">
					 <view class="listState">
						<view class="iconfont iconSize" :class="item.see"><text>{{item.listSee}}</text></view>
						<view class="iconfont iconSize" :class="item.like"><text>{{item.listLike}}</text></view>
					 </view>
				</view>
			</navigator>
		</view>
		<!-- 右侧列表 -->
		<view class="listRight">
			<navigator class="listBlcok" v-for="(item, index) in fallRight" :key="index" :url="`/pages/common/${item.src}`">
				<image :src="item.spimg" :mode="item.size" class="spimg"></image>
				<view class="listTitle">{{item.listTitle}}</view>
				<view class="listFooter">
					 <image :src="item.listPortrait" :mode="item.listmode">
					 <view class="listState">
						<view class="iconfont iconSize" :class="item.see"><text>{{item.listSee}}</text></view>
						<view class="iconfont iconSize" :class="item.like"><text>{{item.listLike}}</text></view>
					 </view>
				</view>
			</navigator>
		</view>
		<view class="loading" v-if="falg">{{loadingText}}</view>
	</view>
</template>

<script>
	var page = 1;
	var pagesize = 2;
	export default{
		data(){
			return{
				
				fall:[],
				falg:false,
				loadingText:'到底了'
			}
		},
		onLoad() {
			/* uni.showLoading({
				title: '正在加载中,稍等片刻'
			});
			setTimeout(function () {
				uni.hideLoading();
			}, 1000); */
			
			uni.request({
				url:"/api/yilong888/jsonSrc/raw/master/waflls.json",
				method: 'get',
				data:{
					//text:'uni.request',
					page:page,
					pagesize:pagesize,
				},
				success: (res) => {
					console.log(res.data);
					this.fall = eval(res.data);// 将请求到的数据存放放到fall中
				}
			}); 
		}, 
		onPullDownRefresh() {
			console.log('触发了下拉刷新')
			setTimeout(()=>{
				uni.request({
					  
					url:"/api/yilong888/jsonSrc/raw/master/list.json",
					method: 'get',
					data:{
						text:'uni.request'
					},
					success: (res) => {
						console.log(res.data);
						this.fall = eval(res.data);// 将请求到的数据存放放到fall中
					}
				}); 
				uni.stopPullDownRefresh()
			},2000)
		},
		onReachBottom() {
			console.log('页面到底了')
			this.fallData();
		},
		methods:{
			fallData() {
				page++; //每触底一次 page +1
				uni.request({
				   url:'/api/yilong888/jsonSrc/raw/master/waflls1.json',
				   //url:'http://rap2.taobao.org:38080/app/mock/263817/api/fall',
				   data:{
					   page:page,
					   pagesize:2,
					},
					success:(res) => {
						this.pagesize = res.data.pagesize;
						console.log(res);
						 if (res.fall < 12) { //没有数据
							this.loadingText="没有数据了！";
							return;
							this.falg = true
						} 
						console.log(this.fall.length)
						//
						console.log(page);
						this.fall = this.fall.concat(res.data.message); //将数据拼接在一起
						//uni.stopPullDownRefresh()
					}
					/* url:'/api/yilong888/jsonSrc/raw/master/waflls.json',
					method: 'get',
					data:{
						text:'uni.request'
						
					},
					 success:(res) => {
						console.log(res);
						if (res.data===null) {
							this.loadingText="没有数据了！";
							return;
						}
						//page++; //每触底一次 page +1
						//console.log(page++)
						//debugger
						this.fall = this.fall.concat(res.data);
						console.log(res.data);
					}, */
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "../../icon/iconfont.css";
	/* 公共游记模块 */
	.listImg{
		 display: flex;
		 flex-flow:row wrap;
		  justify-content:center;
		 align-items:center;
		 justify-content: space-between; 
		 align-content:flex-start; 
		 align-items: flex-start;
		 padding: 0 16rpx;
		 box-sizing: border-box;
		 margin-top: 20rpx;
		 
			.listBlcok{
				width: 350rpx;
				background-color: $uni-bg-color-grey;
				margin-bottom: 20rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				.spimg{
					width: 100%;
				}
				.listTitle{
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28rpx;
					height: 62rpx;
					line-height: 35rpx;
					letter-spacing: $uni-spacing-row-dm;
					color: $uni-text-color;
					/* font-weight: 600; */
					padding: 10rpx;
				}
				.listFooter{
					display: flex;
					padding:20rpx 14rpx 20rpx;
					image {
					  width: 50rpx;
					  height: 50rpx;
					  border-radius: 100%;
					}
					.listState{
						flex: 4;
						text-align: right;
						.iconSize{
							display: inline-block;
							font-size: $uni-font-size-xm;
							color: $uni-text-color-placeholder;
							padding-left: $uni-font-size-six;
							vertical-align: top;
							line-height: 50rpx;
							text {
							  font-size: $uni-font-size-sm;
							  padding-left: 6rpx;
							  display: inline-block;
							}
						}
					}
				}
			}
		
	}
	
</style>
